<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index08-json对象</title>
    <style type="text/css">
        table {
            width: 800px;
            border-collapse: collapse;
        }
        .b-g-c-b {
            background-color: bisque;
        }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>出生日期</th>
    </tr>
    </thead>
    <tbody id="personTbody">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">

    // 单个对象的json
    // var person = {
    //   name: "张三",
    //   age: 20,
    //   gender: "男",
    //   show: function(){
    //     console.log("自我介绍");
    //     // this：指定调用者
    //     // console.log("我的名字:" + this.name + ",我的年龄:" + this.age + ",我的性别:" + this.gender);
    //     // es6中提供一个机制，模板字符串，避免字符串拼接的问题
    //     // 模板字符串``——反引号——取变量值${变量名}
    //     // console.log(`我的名字:${this.name},我的年龄:${this.age},我的性别:${this.gender}`);
    //     // 模板字符串可以换行
    //     var str = `
    //       我的名字:${this.name},
    //       我的年龄:${this.age},
    //       我的性别:${this.gender}
    //     `;
    //     console.log(str);
    //   }
    // };
    // console.log(person.name);
    // console.log(person.age);
    // console.log(person.gender);
    // person.birthday = '2020-09-08';
    // console.log(person);
    // person.show();
    // person.say = function(){
    //   var str = `
    //       我的名字:${this.name},
    //       我的年龄:${this.age},
    //       我的性别:${this.gender},
    //       我的出生日期:${this.birthday}
    //     `;
    //   console.log(str);
    // };
    // person.say();
    // person.attr和person[attr]是两回事
    // person.attr:person ===> {attr},person.attr <====>person['attr']
    // person[attr]: person ===> {获取attr变量的值作为属性用}
    // var attr = 'name';
    // console.log(person.attr);
    // console.log(person[attr]);
    // console.log(person['attr']);
    // for-in可以遍历对象
    // for (var attr in person) {
    //   // console.log(attr);
    //   console.log(person[attr]);
    // }

    // 以数组的形式存在的json数据
    var persons = [{
        id: 1,
        name: '张三',
        age: 20,
        gender: "男",
        birthday: "2020-08-09"
    }, {
        id: 2,
        name: '张三2',
        age: 22,
        gender: "男",
        birthday: "2022-08-09"
    }, {
        id: 3,
        name: '张三3',
        age: 23,
        gender: "男",
        birthday: "2021-08-09"
    }, {
        id: 4,
        name: '张三4',
        age: 24,
        gender: "女",
        birthday: "2019-08-09"
    }, {
        id: 5,
        name: '张三5',
        age: 25,
        gender: "男",
        birthday: "2020-08-09"
    }];
    // 定义用户的数据的字符串变量
    var strTbody = '';
    persons.forEach(function (value, index) {
        // console.log(value, index);
        strTbody += `
            <tr class="${index % 2 == 0 ? 'b-g-c-b' : ''}">
                <td>${value.id}</td>
                <td>${value.name}</td>
                <td>${value.age}</td>
                <td>${value.gender}</td>
                <td>${value.birthday}</td>
            </tr>
        `;
    });
    document.getElementById("personTbody").innerHTML = strTbody;
</script>
</body>
</html>